<template>
  <div class="order_orderError__container">
    <div class="order__code">
      <icon type="iconfont icon-bohui" size="8"></icon>
      <p v-for="item in handleMsg">{{ item }}</p>
    </div>
    <div class="btn btn-refresh" @click="_payMoney"
         v-if="handleState === 4 && isShowPay">去支付</div>
    <div class="btn btn-text" @click="_confirmCloseOrderFn"
         v-if="handleState === 2">确认取消</div>
    <div class="btn btn-refresh" @click="$router.back()"
         v-if="handleState === 2">等会司机</div>
    <div class="btn btn-text" @click="$router.push('/carIndex')"
         v-if="handleState !== 2">返回首页</div>
    <div class="btn btn-refresh" @click="_againCallCar"
         v-if="handleState === 0 || handleState === 1">重新叫车</div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { car } from '../data'
export default {
  data () {
    return {
      isShowPay: true,
      pageState: this.$store.state.userCarState.err_order_state
    }
  },
  mounted () {
    // 手动添加head标题
    this.SET_USER_CAR_TITLE(this.pageState[this.$route.query.state].title);
  },
  computed: {
    handleMsg () {
      return this.pageState[this.$route.query.state].msg
    },
    handleState () {
      return Number(this.$route.query.state)
    }
  },
  methods: {
    ...mapMutations([
      'SET_USER_CAR_TITLE'
    ]),
    _againCallCar () {
      this.$router.push({
        path: `/carIndex/carType`
      })
    },
    _confirmCloseOrderFn () {
      car.cancelOrder({
        orderId: `${this.$route.params.orderId}`,
        reason: '任性',
        force: false
      }).then(res => {
        if (res.data.code === 0) {
          if (res.data === 0) {
            this.isShowPay = false
          } else {
            this.isShowPay = true
          }
          this.$router.push({
            path: `/carIndex/orderError/${this.$route.params.orderId}`,
            query: {
              state: 4
            }
          })
        }
      })
    },
    // 点击【确认取消】按钮，浮窗提示“您的订单已取消”，显示【去支付】和【返回首页】按钮，订单状态跳转取消行程（待支付）
    _cancelOrder () {
      let state = this.$route.query.state;
      let err_order = this.$store.state.userCarState.err_order_state;
      car.cancelOrder({
        orderId: this.$route.params.orderId,
        reason: err_order[state].msg.join(',')
      }).then(res => {
        if (res.data.code === 0) {
          this.$router.push({
            path: '/carIndex'
          })
        } else {
          this.$vux.toast.show({
            time: 1000,
            type: 'warn',
            text: res.data.msg,
            position: 'middle'
          })
        }
      })
    },
    _payMoney () {
      this.$router.push({
        name: 'pay',
        query: {
          orderId: this.$route.params.orderId
        }
      })
    }
  },
  watch: {
    pageState () {
      this.$parent.$parent.$el
        .getElementsByClassName('vux-header')[0]
        .getElementsByTagName('h1')[0].innerHTML = this.pageState[this.$route.query.state].title
    }
  }
}
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"

  .order_orderError__container
    .order__code
      padding-top 7 * .61rem
      padding-bottom 5 * .61rem
      text-align center
      > p
        line-height $sl_font_size_20
        font-size $sl_font_size_18
    .btn
      width 85%
      border 1px solid cadetblue
      border-radius 1px
      text-align center
      padding 1 * .61rem 0
      margin 0 auto
      margin-bottom 2 * .61rem
      font-size $sl_font_size_18
      &.btn-refresh
        background: #46a1bb;
        color: #fff
    .icon
      color: $sl_theme_title
      margin-bottom 20px
</style>
